<script setup name="formFileReport">
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';

	import api from '@/api/api';
	import util from '@/utils/util';

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();

	const scrollbarRef = ref(null);
	let intervalId = null;
	// 自动滚动逻辑
	function startAutoScroll() {
		const scrollWrap = scrollbarRef.value.wrapRef;
		if (!scrollWrap) return;
		intervalId = setInterval(() => {
			if (scrollWrap.scrollTop + scrollWrap.clientHeight >= scrollWrap.scrollHeight - 1) {
				// 如果接近底部，则重置滚动位置
				scrollWrap.scrollTop = 0;
			} else {
				// 否则继续向下滚动
				scrollWrap.scrollTop += 1;
			}
		}, 30); // 每隔30毫秒滚动一次
	};
	// 在组件挂载后开始自动滚动
	onMounted(() => {
		setTimeout(() => {
			// startAutoScroll();
		}, 1000)
	});
	// 在组件卸载前清除定时器
	onUnmounted(() => {
		clearInterval(intervalId);
	});
	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<div class="table-head table-li">
		<p>类型</p>
		<p>课程数量</p>
		<p>项目开放数量</p>
		<p>开放预约数量</p>
		<p>人次数</p>
	</div>
	<el-scrollbar ref="scrollbarRef">
		<template v-for="(item,index) in 20" :key="index">
			<div class="table-li" :class="{'color': index < 3}">
				<p>计算机基础实验教学中心</p>
				<p>100</p>
				<p>100</p>
				<p>100</p>
				<p>100</p>
			</div>
		</template>
	</el-scrollbar>
</template>

<style lang="scss" scoped>
</style>